<template>
	<view class="page pageBg" :style="{ backgroundImage: `url(${staticBg}loginBg.png)`}">
		<image src="/static/img/homeBlcak.png" mode="" class="black" @tap='goIndex'></image>
		<image src="/static/img/loginLogo.png" mode="" class="imglog"></image>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="PhoneNumber" v-if="check">
				<image src="/static/img/loginBtn.png" mode=""  class="loginBtn"></image>
		</button>
		<view class="PhoneNumber" v-if="!check" @tap="checkFalse">
				<image src="/static/img/loginBtn.png" mode=""  class="loginBtn"></image>
		</view>
		<view class="checkWrap" >
			<view class="checkbtnWrap" @tap="changeCheck">
				  <image src="/static/img/chechk.png" class="check" mode="" v-if="!check"></image>
				  <image src="/static/img/chechked.png"  class="check" mode="" v-if="check"></image>
			</view>
		    <view class="service">
				<text @tap="changeCheck">已阅读并同意</text><text @tap="goService(1)">《隐私政策》</text>和<text @tap="goService(2)">《用户协议》</text>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapMutations, mapActions, mapGetters } from "vuex";
	import { getWxCode, getOpenId, getPhone, test } from '@/api/user.js'
	export default {
		data() { 
			return {
				value: 0,
				check:false,
				loginKey:{}
			}
		},
		onLoad() {
			this.getloginKey()
		},
		methods: {
			// ...mapGetters(['userInfo','token']),
			...mapMutations(["login","setUserInfo"]),
			async GetPhoneAndLogin() {
				const res = await getPhone(this.loginKey);
				if (res.status_code == 200) {
					const data = res.data;
					this.login(data.access_token)
					if(this.isEmptyObject(data.student_class)) {
						this.$Router.replace('/pages/joinName/joinName');
					} else {
						const obj = {
							...data.student_class,
							avatar:data.user_avatar
						}
						//console.log(obj);
						this.setUserInfo(obj);
						setTimeout(() => {
							this.$Router.replace('/pages/index/index');
						},200)
					}
				}
			},
			checkFalse(){
				uni.showToast({
					title:'请阅读服务政策和隐私协议，并勾选同意！',
					icon:'none',
					time:2000
				})
			},
			async getloginKey() {
				const code = await getWxCode();
				const { data } = await getOpenId({code:code})
				this.loginKey = data
			},
			async test() {
				const { data }  = await test();
			},
			goService(num) {
				this.$Router.push({
					path: '/pages/service/service',
					query: {
						type: num,		
					}
				})
			},
			goIndex() {
				this.$Router.replace('/pages/index/index')
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.loginKey.iv = e.detail.iv;
					this.loginKey.encryptedData = e.detail.encryptedData
					this.GetPhoneAndLogin();
				}
			},
			changeCheck() {
				this.check = !this.check;
			}
		}
	}
</script>
<style lang="scss">
  page {
	  background-color: #fff;
	  width: 100%;
	  height: 100%;
  }
  .page {
	  background-color: #fff;
	  padding-top: 479rpx;
	  position: relative;
	  .black {
		  width: 75rpx;
		  height: 75rpx;
		  position: absolute;
		  left:30rpx;
		  top:80rpx;
	  }
  }
  .imglog {
	  width: 538rpx;
	  height: 81rpx;
	  display: block;
	  margin: 0 auto 280rpx;
	  
  }
  .loginBtn {
	  width: 596rpx;
	  height: 138rpx;
	  display: block;
	  margin: 0 auto 10rpx;
  }
  .service {
	  color: #736d73;
  }
  .checkWrap {
	  display: flex;
	  justify-content: center;
  }
  .check {
	  width: 30rpx;
	  height: 30rpx;
	  margin-right: 10rpx;
	  vertical-align: middle;
	  position: relative;
	  bottom: 3rpx;
  }
  .PhoneNumber {
	  background-color: transparent;
	  outline: none;
	  border: none;
	  &::after {
		  border:none;
	  }
  }
  .black {
	  
  }
</style>
